<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form v-model="basic">
          <el-form-item label="名称">
            <el-input v-model="basic.name"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="basic.email"/>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="basic.roles" :disabled="true">
              <el-option :value="0" label="普通用户"/>
              <el-option :value="1" label="管理员"/>
              <el-option :value="1" label="系统管理员"/>
            </el-select>
          </el-form-item>
          <el-form-item label="清洗次数">
            <span>{{ basic.clean <= -1?"无限制":basic.clean }}</span>
            <el-button v-if="basic.clean > -1" type="primary" @click="moreNum('clean')">申请次数</el-button>
          </el-form-item>
          <el-form-item label="分析次数">
            <span>{{ basic.analyze <= -1?"无限制":basic.analyze }}</span>
            <el-button v-if="basic.analyze > -1" type="primary" @click="moreNum('analyze')">申请次数</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateAdmin()">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <el-form ref="password" :model="password" class="login-form" auto-complete="on" label-position="left">
          <el-form-item prop="password.oldpassword">
            <label>请输入旧密码</label>
            <el-input
              v-model="password.oldpassword"
              type="password"
              name="password"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password.password">
            <label>请输入密码</label>
            <el-input
              v-model="password.password"
              type="password"
              name="password"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="repassword.repassword">
            <label>请再次输入密码</label>
            <el-input
              v-model="password.repassword"
              type="password"
              name="repassword"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePassword()">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Admin from '@/api/admin'
import Apply from '@/api/apply'
export default {
  data() {
    return {
      role: this.$store.getters.roles,
      activeName: 'first',
      basic: {
        name: '',
        email: '',
        roles: '',
        clean: '',
        analyze: ''
      },
      password: {
        oldpassword: '',
        password: '',
        repassword: ''
      },
      admin: {
        name: '',
        permission: 0
      },
      saveBtnDisabled: false
    }
  },
  watch: { // 监听
    $route(to, from) {
      this.init()
    }
  },
  created() { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init() {
      const id = this.$store.getters.token
      this.getInfo(id)
    },
    getInfo(id) {
      Admin.getInfo(id)
        .then(response => {
          // this.admin = response.data
          this.basic = response.data
          if (response.data.unset === 1) {
            this.activeName = 'second'
            this.$prompt('请及时修改密码', '重置密码', {
              confirmButtonText: '确定'
            }).then(({ value }) => {
              Admin.resetPassword(value).then(response => {
                // 提示信息
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                this.logout()
              })
            }).catch(() => {
            })
          }
        })
    },
    updateAdmin() {
      var use = {
        uid: -1,
        name: this.basic.name,
        email: this.basic.email
      }
      Admin.updateInfo(use).then(response => {
        // 提示信息
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.init()
      })
    },
    updatePassword() {
      const use = {
        password: this.password.oldpassword,
        newPassword: this.password.password
      }
      Admin.updatePassword(use).then(response => {
        // 提示信息
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.logout()
      })
    },
    createAdmin() {
      Admin.createAdmn(this.admin).then(response => {
        // 提示信息
        const pwd = response.data.user.password
        this.$alert('初始密码为 <strong>' + pwd + '</strong><br>请及时修改', '创建用户成功', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定'
        })
      })
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
        window.location.href = '/'
      })
    },
    handleClick() {
    },
    moreNum(type) {
      this.$prompt('请输入申请数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*/,
        inputErrorMessage: '只能输入正整数'
      }).then(({ value }) => {
        if (type === 'clean') {
          Apply.addClean(value).then(response => {
            this.$message({
              showClose: true,
              message: '请求成功，请等待管理员审核',
              type: 'success'
            })
          })
        } else if (type === 'analyze') {
          Apply.addAnalyze(value).then(response => {
            this.$message({
              showClose: true,
              message: '请求成功，请等待管理员审核',
              type: 'success'
            })
          })
        }
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
  .app-container{
    form{
      width: 60%;
    }
  }
</style>
